<template>
  <div class="barCharts_wrap">
    <div class="barCharts_main" ref="barCharts_ref"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
let option = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: "none", // 默认为直线，可选为：'line' | 'shadow'
    },
    formatter: function (params) {
      var str = params[0].name + "：<br>";
      let marker = "";
      let unit = "";
      let marker1 =
        "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(2,209,223,1);'></span>";
      let marker2 =
        "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#FFD700'></span>";
      for (var i = 0; i < params.length; i++) {
        if (i % 2 === 0) {
          //偶数
          marker = marker1;
          unit = "条";
        } else {
          //基数
          marker = marker2;
          unit = "条";
        }
        console.log(i);
        str +=
          marker +
          params[i].seriesName +
          "：" +
          params[i].value +
          unit +
          "<br>";
      }
      return str;
    },
  },
  legend: {
    data: [
      {
        name: "总条数",
        itemStyle: {
          color: "rgba(2,209,223,1)",
        },
      },
      {
        name: "新增条数",
        itemStyle: {
          color: "#FFD700",
        },
      },
    ],
    top: "5%",
    right: "5%",
    itemStyle: {},
    textStyle: {
      color: "rgba(255, 255, 255, 0.7)",
    },
  },
  grid: {
    left: "2%",
    right: "5%",
    // top: "8%",
    bottom: "10%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    // data: [
    //   "水声信号数据",
    //   "处理结果数据",
    //   "信号特征数据",
    //   "环境数据",
    //   "态势数据",
    // ],
    data: null,
    axisTick: {
      // 控制刻度是否和标签对齐
      alignWithLabel: true,
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: "#A0DFFA",
      },
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      show: true,
      fontSize: 12,
      color: "#DBF7FF",
    },
  },
  yAxis: {
    type: "value",
    min: 0,
    axisLine: {
      show: true,
      lineStyle: {
        color: "#A0DFFA",
      },
    },
    splitLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      show: true,
      fontSize: 12,
    },
  },
  series: [
    {
      // custom
      name: "总条数",
      stack: "1",
      type: "custom",
      itemStyle: {
        normal: {
          label: {
            formatter: "{c}",
            show: true,
            position: ["20", "-30"],
            textStyle: {
              fontWeght: "bolder",
              fontSize: 12,
              color: "#fff",
            },
          },
        },
      },
      label: {
        show: true,
        formatter: "{c}",
      },
      tooltip: {},

      renderItem: (params, api) => {
        // console.log(api.coord([[api.value(0)], [api.value(1)]]), "api");
        let cubeLeftStyle = "";
        let cubeRightStyle = "";
        let cubeTopStyle = "";
        cubeLeftStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "#0462AC",
          },
          {
            offset: 1,
            color: "#4CD5EA",
          },
        ]);
        cubeRightStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "#1DA2DF",
          },
          {
            offset: 1,
            color: "#4ED6EA",
          },
        ]);
        cubeTopStyle = "#39B8E7";
        const location = api.coord([api.value(0), api.value(1)]);
        // const textElement = new echarts.graphic.Text({
        //   style: {
        //     text: api.value(1),
        //     x: location[0] - 10,
        //     y: location[1] - 40, // 设置文本位置在图表上方
        //     fill: "white", // 设置文本颜色
        //     fontSize: 12, // 设置文本大小
        //   },
        // });
        // // 将文本标签添加到图表上
        // api.getZr().add(textElement);
        // console.log(api.getZr())
        return {
          type: "group",
          children: [
            {
              type: "CubeLeft",
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0]),
              },
              style: api.style(),
            },
            {
              type: "CubeRight",
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0]),
              },
              style: {
                fill: cubeRightStyle,
              },
            },
            {
              type: "CubeTop",
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0]),
              },
              style: {
                fill: cubeTopStyle,
              },
            },
          ],
        };
      },
      data: [100, 200, 300, 400, 200],
    },
    {
      // custom
      name: "新增条数",
      stack: "2",
      itemStyle: {
        normal: {
          label: {
            formatter: "{c}",
            show: true,
            position: ["20", "-30"],
            textStyle: {
              fontWeght: "bolder",
              fontSize: 12,
              color: "#fff",
            },
          },
        },
      },
      type: "custom",
      renderItem: (params, api) => {
        let cubeLeftStyle = "";
        let cubeRightStyle = "";
        let cubeTopStyle = "";
        cubeLeftStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "#FFD700", // 浅黄色
          },
          {
            offset: 0.5,
            color: "#FFA500", // 深黄色
          },
          {
            offset: 1,
            color: "#FFD700", // 浅黄色
          },
        ]);
        cubeRightStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "#FFD700", // 浅黄色
          },
          {
            offset: 0.5,
            color: "#FFA500", // 深黄色
          },
          {
            offset: 1,
            color: "#FFD700", // 浅黄色
          },
        ]);
        cubeTopStyle = "#FFD700";
        const location = api.coord([api.value(0), api.value(1)]);
        // const textElement = new echarts.graphic.Text({
        //   style: {
        //     text: api.value(1),
        //     x: location[0] + 40,
        //     y: location[1] - 40, // 设置文本位置在图表上方
        //     fill: "white", // 设置文本颜色
        //     fontSize: 12, // 设置文本大小
        //   },
        // });
        // api.getZr().add(textElement);
        const offsetX = 50;
        return {
          type: "group",
          children: [
            {
              type: "CubeLeft",
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                // xValue:['水声信号数据','处理结果数据','信号特征数据','环境数据','态势数据'],
                x: location[0] + offsetX,
                y: location[1],
                // xAxisPoint: api.coord([api.value(0), 0]),
                xAxisPoint: api
                  .coord([api.value(0), 0])
                  .map((item, i) => (i === 0 ? item + offsetX : item)),
              },
              style: api.style(),
            },
            {
              type: "CubeRight",
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0] + offsetX,
                y: location[1],
                // xAxisPoint: api.coord([api.value(0), 0]),
                xAxisPoint: api
                  .coord([api.value(0), 0])
                  .map((item, i) => (i === 0 ? item + offsetX : item)),
              },
              style: {
                fill: cubeRightStyle,
              },
            },
            {
              type: "CubeTop",
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0] + offsetX,
                y: location[1],
                // xAxisPoint: api.coord([api.value(0), 0]),
                xAxisPoint: api
                  .coord([api.value(0), 0])
                  .map((item, i) => (i === 0 ? item + offsetX : item)),
              },
              style: {
                fill: cubeTopStyle,
              },
            },
          ],
        };
      },
      data: [100, 100, 100, 100, 100],
    },
    // {
    //   type: "custom",
    //   itemStyle: {
    //     color: "transparent",
    //   },
    //   tooltip: {},
    //   data: null,
    // },
  ],
};
export default {
  data() {
    return {
      chart: null,
    };
  },
  props: {
    chartData: {
      type: Array,
      default: () => {
        return [
          //   {
          //     name: "水声信号数据",
          //     value: 200,
          //   },
          //   {
          //     name: "处理数据结果",
          //     value: 150,
          //   },
        ];
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChartFn();
    });
  },
  watch: {
    chartData: {
      deep: true,
      immediate: true,
      handler: function (val) {
        this.$nextTick(() => {
          if (val?.length) {
            // this.initChartFn();
          }
        });
      },
    },
  },
  methods: {
    initChartFn() {
      if (!this.chart) {
        let dom = this.$refs.barCharts_ref;
        this.chart = echarts.init(dom);
      }
      this.setChartOptionsFn();
    },
    setChartOptionsFn() {
      // 注册三个面图形
      echarts.graphic.registerShape("CubeLeft", this.cubeLeftFn());
      echarts.graphic.registerShape("CubeRight", this.cubeRightFn());
      echarts.graphic.registerShape("CubeTop", this.cubeTopFn());
      let xAxisData = this.chartData.map((item) => {
        return item.name;
      });
      let seriesData = this.chartData.map((item) => {
        return item.value;
      });
      let weekdata = this.chartData.map((item) => {
        return item.weekvalue;
      });
      option.xAxis.data = xAxisData;
      option.series[0].data = seriesData;
      option.series[1].data = weekdata;

      this.chart.setOption(option);
    },
    // 绘制左侧面
    cubeLeftFn() {
      const CubeLeft = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          // 会canvas的应该都能看得懂，shape是从custom传入的
          const xAxisPoint = shape.xAxisPoint;
          const c0 = [shape.x + 7, shape.y];
          const c1 = [shape.x - 23, shape.y - 6];
          const c2 = [xAxisPoint[0] - 23, xAxisPoint[1] - 13];
          const c3 = [xAxisPoint[0] + 7, xAxisPoint[1]];
          ctx
            .moveTo(c0[0], c0[1])
            .lineTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .closePath();
        },
      });
      return CubeLeft;
    },
    //绘制右侧面
    cubeRightFn() {
      const CubeRight = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint;
          const c1 = [shape.x + 7, shape.y];
          const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]];
          const c3 = [xAxisPoint[0] + 25, xAxisPoint[1] - 15];
          const c4 = [shape.x + 25, shape.y - 15];
          ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath();
        },
      });
      return CubeRight;
    },
    // 绘制顶面
    cubeTopFn() {
      const CubeTop = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const c1 = [shape.x + 7, shape.y];
          const c2 = [shape.x + 25, shape.y - 15]; //右点
          const c3 = [shape.x - 5, shape.y - 20];
          const c4 = [shape.x - 23, shape.y - 6];
          ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath();
        },
      });
      return CubeTop;
    },
  },
};
</script>

<style lang="scss" scoped>
.barCharts_wrap {
  width: 100%;
  height: 100%;

  .barCharts_main {
    width: 100%;
    height: 100%;
  }
}
</style>
